<template>
<div class="container">
  <headers title="发布任务" :refresh="isRefresh" path="/home"></headers>
  <div class="bar bar-header-secondary">
    <div class="searchbar">
      <a class="searchbar-cancel" @click="doSearch">搜索</a>
      <div class="search-input">
        <label class="icon icon-search" for="search"></label>
        <input v-model="votedName" type="text" id="search" placeholder="请输入您要搜索的内容" />
      </div>
    </div>
  </div>
  <div class="content" id="app-task">
    <div class="row no-gutter bg-color-white size-12">
      <div class="col-33 icon-pubtask">
        <a v-link="{path: '/rebuild_task', replace: true}">
          <img src="../assets/images/publish/mp-toupiao.png" alt="MP投票">
          <span class="icon-label">MP投票</span>
        </a>
      </div>
      <div class="col-33 icon-pubtask">
        <a v-link="{path: '/rebuild_third', replace: true}">
          <img src="../assets/images/publish/third-party-zhitou.png" alt="第三方直投">
          <span class="icon-label">第三方直投</span>
        </a>
      </div>
      <div class="col-33 icon-pubtask">
        <a v-link="{path: '/rebuild_attention', replace: true}">
          <img src="../assets/images/publish/attention-toupiao.png" alt="关注投票">
          <span class="icon-label">关注投票</span>
        </a>
      </div>
      <div class="col-33 icon-pubtask no-padding-top">
        <a v-link="{path: '/rebuild_read', replace: true}">
          <img src="../assets/images/publish/article-read.png" alt="文章阅读">
          <span class="icon-label">文章阅读</span>
        </a>
      </div>
      <div class="col-33 icon-pubtask no-padding-top">
        <a v-link="{path: '/rebuild_upvote', replace: true}">
          <img src="../assets/images/publish/article-good.png" alt="文章点赞">
          <span class="icon-label">文章点赞</span>
        </a>
      </div>
      <div class="col-33 icon-pubtask no-padding-top">
        <a v-link="{path: '/rebuild_repeat', replace: true}">
          <img src="../assets/images/publish/article-forward.png" alt="文章转发">
          <span class="icon-label">文章转发</span>
        </a>
      </div>
    </div>
    <div class="list-block media-list no-margin mar-top-10"  v-for="task in tasks">
      <ul>
        <li class="item-content">
          <div class="col-100">
            <div class="item-title-row task-header">
              <div class="item-title color-light">任务ID：{{task.id}}</div>
              <div class="item-after color-light">类型：{{task.voteTypeId | formatTypeName}}</div>
            </div>
            <div class="item-title-row task-body">
              <div class="item-title">被投人：{{task.votedName}}</div>
              <div class="item-after">状态：<span class="color-danger">{{task.status | formatStatus}}</span></div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">发布时间：{{task.createDateView | formatDate}}</div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">截止时间：{{task.taskEndDateView | formatDate}}</div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">总量：<span>{{task.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;进行中：<span>{{task.count - task.completeCount}}</span>&nbsp;&nbsp;&nbsp;&nbsp;已完成：<span>{{task.completeCount}}</span></div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">单价：<i class="icon1 icon-coin"></i>&nbsp;{{task.unitPrice}}</div>
            </div>
            <div class="item-title-row task-bottom">
              <div class="item-title">
                <span v-if="task.status != 3" class="col-33" @click="suspendTask(task.id)"><i class="icon1 icon-lock"></i> 冻结</span>
                <span class="col-33" :style="task.status | styles">
                  <a v-link="{path:'/shenhe/' + task.id, replace: true}"><i class="icon1 icon-review"></i> 审核</a>
                  <a class="badge">{{task.completeCount}}</a>
                </span>
                <span class="col-33" style="margin-left:-4px;">
                  <a v-link="{path: '/jiapiao/' + task.id + '/1', replace: true}"><i class="icon1 icon-plus"></i> 加票</a>
                </span>
                <span v-if="task.status == 3" class="col-33" style="margin-left:-4px;" @click="thawTask(task.id)"><i class="icon1 icon-lock"></i> 解冻</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader" v-show="!isSearch">
      <div class="preloader" v-show="isLoading"></div>
      <div class="preloader-btn" v-if="!isLoading && !isLoaded" @click="doPreload">点击加载更多</div>
      <div class="preloaded" v-if="isLoaded">没有更多内容了</div>
    </div>
    <div style="width:100%;height:58px;" v-show="isSearch"></div>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/bill/1', replace: true}">
      <span class="icon icon2 refund-icon"></span>
      <span class="tab-label">返还</span>
      <span class="badge">0</span>
    </a>
    <a class="tab-item" v-link="{path: '/chongzhi', replace: true}">
      <span class="icon icon2 chongzhi-icon"></span>
      <span class="tab-label">充值</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.findAppVoteTypes()
    this.getSelfTask(this.currPage, () => {
      setTimeout(() => {
        if (this.currPage === this.totalPage) {
          this.isLoaded = true
        }
        this.isLoading = false
      }, 1000)
    })
  },
  data () {
    return {
      tasks: [],
      tmpTasks: [],
      customerId: store('customerId') || 0,
      voteTypes: [],
      votedName: '',
      isRefresh: true,
      isLoading: true,
      isLoaded: false,
      isSearch: false,
      totalPage: 1,
      currPage: 1
    }
  },
  methods: {
    findAppVoteTypes () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppVoteTypes')
      .then((data) => {
        this.$set('voteTypes', data.data)
      })
    },
    getSelfTask (page, callback) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppCustomerTasks', {
        params: {
          customerId: this.customerId,
          votedName: this.votedName,
          page: page
        }
      }).then((data) => {
        let total = data.data.total ? Math.ceil(data.data.total / 5) : 1
        this.$set('totalPage', total)
        if (this.tasks.length === 0) {
          this.$set('tasks', data.data.rows)
        }
        else {
          this.tasks = this.tasks.concat(data.data.rows)
        }
        if (callback) {
          callback()
        }
      })
    },
    suspendTask (taskid) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/suspendTask?id=' + taskid)
      .then((data) => {
        if (data.data.success) {
          $.alert('任务已冻结', () => {
            this.tasks.forEach((val, key) => {
              if (val.id === taskid) {
                this.tasks[key].status = 3
              }
            })
          })
        }
      })
    },
    thawTask (taskid) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/unfreezTask?id=' + taskid)
      .then((data) => {
        if (data.data.success) {
          $.alert('解冻成功', () => {
            this.tasks.forEach((val, key) => {
              if (val.id === taskid) {
                this.tasks[key].status = 1
              }
            })
          })
        }
      })
    },
    doPreload () {
      if (this.isLoading) {
        return false
      }
      if (this.currPage === this.totalPage) {
        return false
      }
      this.isLoading = true
      this.currPage++
      this.getSelfTask(this.currPage, () => {
        setTimeout(() => {
          if (this.currPage === this.totalPage) {
            this.isLoaded = true
          }
          this.isLoading = false
        }, 1000)
      })
      return false
    },
    doSearch () {
      if (!this.votedName) {
        return false
      }
      this.isSearch = true
      if (this.tmpTasks.length === 0) {
        this.$set('tmpTasks', this.tasks)
      }
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppCustomerTasks', {
        params: {
          customerId: this.customerId,
          votedName: this.votedName
        }
      }).then((data) => {
        this.$set('tasks', data.data.rows)
      })
      return false
    }
  },
  filters: {
    formatDate (date) {
      if (!date) {
        return '-'
      }
      return date.substr(0, 16)
    },
    formatStatus (state) {
      if (state === 0) {
        return '任务过时'
      }
      else if (state === 1) {
        return '进行中'
      }
      else if (state === 2) {
        return '任务违规'
      }
      else if (state === 3) {
        return '任务暂停'
      }
      return '未知状态'
    },
    formatTypeName (typeid) {
      let typeName = ''
      this.voteTypes.forEach((val, key) => {
        if (val.id === typeid) {
          typeName = val.name
        }
      })
      if (typeName) {
        return typeName
      }
      return '未知类型'
    },
    classes (state) {
      if (state === 3) {
        return 'col-25'
      }
      return 'col-33'
    },
    styles (state) {
      if (state === 3) {
        return ''
      }
      return 'margin-left:-4px;'
    }
  },
  watch: {
    votedName (val) {
      if (!val) {
        if (this.tmpTasks.length > 0) {
          this.$set('tasks', this.tmpTasks)
          this.$set('tmpTasks', [])
          this.isSearch = false
        }
      }
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.col-100{
  width:100%;
}
.bar .searchbar{
  background-color:#f2f3f8;
}
.bar .searchbar .searchbar-cancel {
  color:#ffffff;
  border:1px #0894ec solid;
  background-color:#0894ec;
  border-radius:4px;
}
.icon-pubtask{
  padding:10px 20px;
}
.icon-pubtask a{
  color:#3d4145;
}
.icon-pubtask img{
  width:85%;
  height:auto;
  margin:0 auto;
  display:block;
}
.icon-pubtask .icon-label{
  width:100%;
  text-align:center;
  display:inline-block;
}
.task-header{
  padding-top:10px;
  padding-bottom:9px;
}
.task-header,.task-body,.task-footer{
  padding-left:15px;
  padding-right:15px;
}
.task-body{
  padding-top:10px;
  padding-bottom:5px;
}
.task-footer{
  color:#959595;
  padding-bottom:5px;
}
.task-header:after{
  content:'';
  position:absolute;
  left:0;
  top:40px;
  bottom:auto;
  right:auto;
  height:1px;
  width:100%;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
}
.task-body .item-title{
  white-space:normal;
}
.task-bottom .item-title{
  width:100%;
}
.task-bottom .item-title:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:auto;
  right:auto;
  height:1px;
  width:100%;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
}
.task-bottom span{
  height:40px;
  line-height:40px;
  text-align:center;
  display:inline-block;
}
.task-bottom span:before{
  content:'';
  float:left;
  margin-top:10px;
  height:50%;
  width:1px;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
}
.task-bottom span:first-child:before{
  width:0;
}
.task-bottom a{
  color:#3d4145;
}
.task-bottom .badge{
  height:.8rem;
  min-width:.8rem;
  padding:0 .2rem;
  font-size: .6rem;
  line-height:.8rem;
  color:#fff;
  background: red;
  border-radius:.5rem;
  margin-left:.1rem;
}
.icon1 {
  width:14px;
  height:14px;
  display:inline-block;
  vertical-align:middle;
  background-size:100% 100%;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  -moz-osx-font-smoothing:grayscale;
}
.icon1.icon-lock{
  background-image:url(../assets/images/public/icon-lock.png);
}
.icon1.icon-review{
  background-image:url(../assets/images/public/icon-review.png);
}
.icon1.icon-plus{
  background-image:url(../assets/images/public/icon-plus.png);
}
.icon1.icon-modify{
  background-image:url(../assets/images/public/icon-form-verify.png);
}
.icon1.icon-coin{
  display:inline-block;
  vertical-align:middle;
  background-size:100% auto;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  width:18px;
  height:18px;
  background-image:url(../assets/images/public/icon-coin.png);
}
.task-bottom .col-33 {
  width: 33.333333333333336%;
  margin: 0;
}
.task-bottom .col-25 {
  width: 25%;
  margin: 0;
}
.infinite-scroll-preloader{
  margin:10px 10px 65px 10px;
  text-align:center;
}
.infinite-scroll-preloader .preloader{
  width:20px;
  height:20px;
}
.infinite-scroll-preloader .preloader-btn{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  border:1px #d6d6d6 solid;
  border-radius:4px;
  font-size:14px;
}
.infinite-scroll-preloader .preloaded{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  color:#aaa;
  font-size:14px;
}
</style>